<!DOCTYPE html>
<html>

<!--Begin head-->
<head>

	<link href="Styles/default.css" type="text/css" rel="stylesheet" />
	
	<!--css for the jquery UI stuff, DEFAULT-->
	<link href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"/>
	<link href="css/ui-lightness/jquery-jvert-tabs-1.1.4.css" rel="stylesheet" type="text/css"/>
	<!--jquery main functions-->
	<script src="js/jquery.min.js"></script>
	<!--jquery ui functions-->
	<script src="js/jquery-ui.min.js"></script>
	<!--jquery vertical tabs-->
	<script src="js/jquery-jvert-tabs-1.1.4.js"></script>
	<!--slidegallery plugin functions-->
	<script language="javascript" type="text/javascript" src="js/jquery.slidingGallery-1.2.min.js"></script>
	<!--script for initializing jquery units-->
	<script>
		var g0 = true;
		var g1 = false;
		var g2 = false;
		var g3 = false;
		var g4 = false;
		var g5 = false;
		$(document).ready(
			function() {
				//set functions for zooming in and out in image gallery
				var zoomFunc = function(dimension) {
					return dimension * 1.5;
				}
				var shrinkFunc = function(dimension) {
					return dimension * 0.3;
				}
				//initialize main tabs
				$("#tabs").tabs();
				//initialize vertical tabs for collections tab
				$("#vtabs").jVertTabs();
				//initialize image gallery on first tab
				$('div.gallery img').slidingGallery({
					'slideSpeed':'normal',
					'Pzoom':zoomFunc,
					'Pshrink':shrinkFunc,
					'Pheight':300,
					'Pwidth':200,
					'defaultLayout':'portrait',
					'gutterWidth':30,
					'container':$('div.gallery')
				});
			}	
		);
	</script>
</head>
<!--End head-->

<!--Begin body-->
<body>		
	<!--Start main tabs-->
	<div id="tabs" style="min-width:700px;">
		<!--list of main tabs-->
		<ul>
			<li><a href="#collection"><span>My Collection</span></a></li>
			<li><a href="#trades"><span>Open Trades</span></a></li>
			<li><a href="#browse"><span>Browse</span></a></li>
		</ul>
		<!--End list of main tabs-->
		<!--Collecion tab code-->
		<div id="collection">
			<!--Vertical tabs under collection -->
			<div id="vtabs">
				<div>
					<!--List of vertical tabs-->
					<ul>
						<li><a href="#vtabs-content-a">All Types</a></li>
						<li><a href="#vtabs-content-b">Race</a></li>
						<li><a href="#vtabs-content-c">Aspect</a></li>
						<li><a href="#vtabs-content-d">Power</a></li>
						<li><a href="#vtabs-content-e">Minion</a></li>
						<li><a href="#vtabs-content-f">Bane</a></li>
					</ul>
					<!--End list of vertical tabs-->
				</div>
				<!--Start vertical tab content-->
				<div>
					<!--All type tab-->
					<div id="#vtabs-content-a" style=" min-width:400px;">
						<!--Gallery of cards-->
						<div class="gallery" style="height:450px;">
							<img class="start" src="prototypeImages/card.jpg"/>
							<img src="prototypeImages/card.jpg"/>
							<img src="prototypeImages/card1.jpg"/>
							<img src="prototypeImages/card.jpg"/>
							<img src="prototypeImages/card.jpg"/>
						</div>
						<!--End gallery of cards-->
					</div>
					<!--End all type tab-->
					<!--Race tab-->
					<div id="#vtabs-content-b">
						test test
					</div>
					<!--End race tab-->
					<!--Aspect tab-->
					<div id="#vtabs-content-c">
						tst sdfs
					</div>	
					<!--End aspect tab-->
					<!--Power tab-->
					<div id="#vtabs-content-d">
						sdfsafd
					</div>	
					<!--End power tab-->
					<!--Minion tab-->
					<div id="#vtabs-content-e">
						sldjfie
					</div>	
					<!--End minion tab
					<!--Bane tab-->
					<div id="#vtabs-content-f">
						sdfielsf
					</div>	
					<!--End bane tab-->
				</div>
				<!--End vertical tab content-->
			</div>
			<!--End vertical tabs-->
		</div>
		<!--End collection tab-->
		<!--Trades tab code-->
		<div id="trades">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</div>
		<!--Browse tab code-->
		<div id="browse">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</div>
	</div>
	<!--End main tabs-->
	
</body>
<!--End body-->

</html>